<template>
  <div>
    <div class="total-amount">
      <div class="total-amount-title">缴费记录</div>
    </div>
    <el-table
      :data="orderDetails"
      style="width: 100%"
      :header-cell-style="{
        background: '#F1F1F1',
        'font-size': '14px',
        'font-weight': 600,
        color: '#333333',
      }"
      :cell-style="{
        'font-size': '14px',
        'font-weight': 400,
        color: '#333333',
      }"
    >
      <el-table-column label="序号" min-width="60" fixed="left">
        <template #default="scope">
          {{ (scope.$index + 1).toString().padStart(2, "0") }}
        </template>
      </el-table-column>
      <el-table-column label="缴费原因" min-width="80">
        <template #default="scope">
          <div>
            {{ scope.row.optType == 1 ? "开卡" : scope.row.optType == 2 ? "续费" : "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="buyUnit" label="选择数量" min-width="80" />
      <el-table-column prop="validityStart" label="生效日期" min-width="120" />
      <el-table-column prop="validityEnd" label="失效日期" min-width="120" />
      <el-table-column
        prop="buyPrice"
        label="实付金额(元)"
        min-width="120"
        align="right"
      />
      <el-table-column label="支付方式" min-width="80">
        <template #default="scope">
          <div>
            {{
              scope.row.payWay == 1
                ? "微信"
                : scope.row.payWay == 2
                ? "支付宝"
                : scope.row.payWay == 3
                ? "现金"
                : "-"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="channel" label="缴费途径" min-width="80">
        <template #default="scope">
          {{
            scope.row.channel == 1
              ? "一体化"
              : scope.row.channel == 2
              ? "小程序"
              : scope.row.channel == 3
              ? "APP"
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="optUser" label="操作业务员" min-width="120" />
      <el-table-column prop="transTime" label="缴费时间" min-width="180" />
      <el-table-column label="开票状态" min-width="80">
        <template #default="scope">
          {{
            scope.row.invoiceStatus == 0
              ? "未开票"
              : scope.row.invoiceStatus == 1
              ? "已开票"
              : "-"
          }}
        </template>
      </el-table-column>
      <template #empty>
        <el-empty :image="imgNone" />
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { reactive, ref, defineProps } from "vue";
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="less" scoped>
.total-amount {
    margin-bottom: 17px;
  }
  .total-amount-title {
    font-weight: 600;
    font-size: 16px;
    color: #1D2129;
  }
</style>